<div class="d-flex align-items-center justify-content-between">
  <h4 mat-dialog-title class="mb-2">
    {{
      (data.isReadOnly
        ? 'user.tooltips.VIEW'
        : data.isEdit
        ? 'user.editUser.TITLE'
        : 'user.addUser.TITLE'
      ) | translate
    }}
  </h4>
  <button
    (click)="onNoClick()"
    class="mb-2"
    aria-label="Close dialog"
    mat-icon-button>
    <i class="eos-icons">close</i>
  </button>
</div>
<hr class="fancy" />
<form (ngSubmit)="submit()" [formGroup]="form">
  <div class="user__container">
    <div class="user__field">
      <mat-icon
        aria-hidden="false"
        aria-label="User icon"
        class="mr-3 mb-3 user__icon"
        >person
      </mat-icon>
      <mat-form-field class="w-100">
        <mat-label>{{ 'user.addUser.USER_NAME' | translate }}</mat-label>
        <input
          matInput
          formControlName="username"
          [attr.maxlength]="'general.FILTER_MAX_LEN' | translate" />
        <mat-error *ngIf="form.controls.username.hasError('required')">
          {{ 'general.REQUIRED' | translate }}
        </mat-error>
      </mat-form-field>
    </div>
    <div class="user__field">
      <mat-icon
        aria-hidden="false"
        aria-label="Email icon"
        class="mr-3 mb-3 user__icon"
        >email
      </mat-icon>
      <mat-form-field class="w-100">
        <mat-label>{{ 'user.addUser.EMAIL' | translate }}</mat-label>
        <input
          matInput
          type="email"
          formControlName="email"
          [attr.maxlength]="'general.FILTER_MAX_LEN' | translate" />
        <mat-error *ngIf="form.controls.email.hasError('email')">
          {{ 'license.register.EMAIL_REQUIRED' | translate }}
        </mat-error>
      </mat-form-field>
    </div>
    <div class="user__field">
      <mat-icon
        aria-hidden="false"
        aria-label="Role icon"
        class="mr-3 mb-3 user__icon"
        fontSet="fa"
        fontIcon="fa-user-secret">
      </mat-icon>
      <mat-form-field class="w-25">
        <mat-label>{{ 'user.addUser.ROLE_PLACEHOLDER' | translate }}</mat-label>
        <mat-select formControlName="role">
          <mat-option *ngFor="let role of data.globalRoles" [value]="role">
            {{ role ? role : 'none' }}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>
    <div class="user__field" *ngIf="!data.isEdit">
      <mat-icon
        aria-hidden="false"
        aria-label="Language icon"
        class="mr-3 mb-3 user__icon"
        >language
      </mat-icon>
      <mat-form-field class="w-25">
        <mat-label>{{ 'profile.LOCALE' | translate }}</mat-label>
        <mat-select (selectionChange)="updateTable()" formControlName="locale">
          <mat-option *ngFor="let lang of languages" [value]="lang.code">
            {{ lang.text }}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>
  </div>
  <div class="user__formGroup" *ngIf="!data.isEdit">
    <app-password-panel [passwordForm]="passwordForm"></app-password-panel>
  </div>
  <button
    (click)="toggleAdvSetting = !toggleAdvSetting"
    class="mr-2 my-2"
    [id]="dialogPrefix + '-user-dialog-adv-setting'"
    mat-stroked-button
    type="button"
    *ngIf="
      isKube && !['admin', 'fedAdmin', ''].includes(form.controls.role.value)
    ">
    {{
      (toggleAdvSetting ? 'user.HIDE_ADV_SETTING' : 'user.SHOW_ADV_SETTING')
        | translate
    }}
  </button>
  <app-group-domain-role-table
    [activeRole]="domainTableSource.data[0].namespaceRole"
    [dataSource]="domainTableSource"
    [domains]="data.domains"
    [global_role]="selectedRole"
    [group_roles]="data.domainRoles"
    [hidden]="!showAdvSetting"
    [isReadOnly]="data.isReadOnly || false"></app-group-domain-role-table>
  <div class="d-flex justify-content-end" *ngIf="!data.isReadOnly">
    <button
      (click)="onNoClick()"
      class="mr-2"
      [id]="dialogPrefix + '-user-dialog-cancel'"
      mat-button
      type="button">
      {{ 'user.addUser.CANCEL' | translate }}
    </button>
    <app-loading-button
      [disabled]="
        form.invalid ||
        (!form.dirty && !domainTableDirty) ||
        !!(saving$ | async)
      "
      [loading]="!!(saving$ | async)"
      [text]="
        (data.isEdit ? 'user.editUser.EDIT' : 'user.addUser.ADD') | translate
      "
      appearance="mat-raised-button"
      buttonClasses="mr-1"
      color="primary"
      [id]="dialogPrefix + '-user-dialog-submit'"
      type="submit">
    </app-loading-button>
  </div>
</form>
